<template>
  <div class="operationPageWrap">
  <div class="pageTableInner">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">查询时间:</span>
              <span class="searchInputFont">
                   <el-date-picker
                     v-model="searchInfo.tripDate"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期"
                     :picker-options="$store.state.pickerOptions0">
                  </el-date-picker>

                </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">订单号:</span>
              <span class="searchInputFont">
                  <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.orderNo"  auto-complete="off" placeholder="订单号"></el-input>
              </span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">企业:</span>
              <span class="searchInputFont">
                <el-select v-model="searchInfo.enterpriseNo" style="width: 100%;" size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
            </div>
          </el-col>
          <div style="float: right;margin-right: 10px;">
            <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
          </div>
        </el-row>
      </div>
      <div class="infoSearchOne">
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">车辆编码:</span>
              <span class="searchInputFont">
                    <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.bicycleNo"  auto-complete="off" placeholder="车辆编码"></el-input>
              </span>
            </div>

          </el-col>
          <el-col :span="6">
            <div class="searchWrap">
              <span class="searchFont">用户ID:</span>
              <span class="searchInputFont">
                  <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.userId"  auto-complete="off" placeholder="用户ID"></el-input>
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="tableContainer" style="top:122px;">
      <div class="tableInner" ref="tableInner">
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          :height="tableHeight"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="订单编号"
            prop="orderNo"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="用户ID"
            prop="userId"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="下单时间"
            prop="startTime"
          >
          </el-table-column>
          <el-table-column
            label="还车时间"
            prop="endTime"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="订单里程(米)"
            prop="orderMile"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="最后更新时间"
            prop="uploadTime"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column
            label="操作"
            width="80"
          >
            <template slot-scope="scope">
              <i class="iconfont icon-chakan" @click="openDialog(scope.row.orderNo)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
    <journeyDetailBtn ref="detailBtn"></journeyDetailBtn>
  </div>
</template>

<script>
  import journeyDetailBtn from "./btn/journeyDetailBtn.vue"
  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        tableHeight: 400,
        searchInfo: {
          "enterpriseNo":"",
          "bicycleNo":"",
          "tripDate":"",
          "orderNo":"",
          "userId":"",
        },
        streetData: [],
      }
    },
    components: {journeyDetailBtn},
    created(){

    },
    mounted(){
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".operationPageWrap").clientHeight-120
      })
    },

    methods: {
      openDialog(orderNo){
        this.axios.post(process.env.API_HOST + `/trip/selectTrackDetail`, {...this.searchInfo,orderNo:orderNo})
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.$refs.detailBtn.dialigOpen(result.result)
            }
          })
      },
      //获取所有信息
      searchRowsInfo(){
        if(!this.searchInfo.tripDate){
          this.$message({
            type: "warning",
            message: '请选择查询时间！',
          });
          return
        }else if(!this.searchInfo.bicycleNo&&!this.searchInfo.orderNo&&!this.searchInfo.userId){
          this.$message({
            type: "warning",
            message: '车辆编码、订单号、用户ID至少填一个！',
          });
          return
        }
          this.axios.post(process.env.API_HOST + `/trip/selectTrackList`, this.searchInfo)
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.rows = result.result
            }
          })
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()





</style>
